<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color:red">CountCase组件的求和是：{{ sum }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name"/>
        <button @click="add">添加</button>
        <ol>
            <li v-for="p in personList" :key="p.id">
                {{ p.name }}
            </li>
        </ol>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import { nanoid } from 'nanoid'

export default {
  name: 'Person',
  data () {
    return {
      name: ''
    }
  },
  computed: {
    /* personList () {
      return this.$store.state.personList
    }, */
    /* sum () {
      return this.$store.state.sum
    }, */
    ...mapState(['personList', 'sum'])
  },
  methods: {
    add () {
      const personObj = {id: nanoid(), name: this.name}
      this.$store.commit('ADD_PERSON', personObj)
      this.name = ''
    }
  }

}
</script>

<style>

</style>
